<template>
    <el-upload :action="uploadUrl" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove"
        :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
        :multiple="multiple" :limit="limit" :on-exceed="handleExceed">
        <!-- 自定义上传按钮 -->
        <slot name="upBtn">
            <el-button size="small" type="primary">上传图片</el-button>
        </slot>

        <!-- 自定义上传时的提示信息 -->
        <slot name="tip"></slot>


        <!-- 自定义已上传文件的样式 -->
        <template slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-name">{{ file.name }}</span>
            <i class="el-icon-close" @click="handleRemove(file)"></i>
        </template>
    </el-upload>
</template>

<script>
export default {
    name: 'uploadFile',
    props: {
        multiple: {
            type: Boolean,
            default: false,
        },
        limit: {
            type: Number,
            default: 1,
        }
    },
    data () {
        return {
            fileList: [],
            uploadUrl: '你的上传API',
            headers: {
                'Authorization': 'Bearer ' + this.$store.getters.token,
            },
        }
    },
    methods: {
        handlePreview (file) {
            // 预览逻辑
        },
        handleRemove (file, fileList) {
            // 移除逻辑
        },
        beforeUpload (file) {
            // 上传前的校验逻辑
        },
        handleSuccess (response, file, fileList) {
            // 上传成功逻辑
        },
        handleError (err, file, fileList) {
            // 上传失败逻辑
        },
        handleExceed (files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
        },
    },
}
</script>
<style scoped lang="less">
/* 你的样式代码 */
.el-upload__tip {
    margin-top: 5px;
    color: #666;
}

.el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.el-upload-list__item-name {
    margin-left: 10px;
}

.el-icon-close {
    cursor: pointer;
    color: #f56c6c;
}

.el-icon-close:hover {
    color: #e65d6e;
}
</style>